<template>
  <div class="home">
    <div class="homeLeft">
      <NavTab></NavTab>
    </div>
    <div class="homeRight">
      <div class="header">
        <NavHead></NavHead>
      </div>
      <div class="mainNav scrollbar">
        <NavLink></NavLink>
      </div>
      <div id="mainCont" class="mainCont">
        <router-view v-slot="{ Component }">
          <!-- <transition name="fade-transform" mode="out-in"> -->
          <transition>
            <keep-alive :include="visitedTags">
            <component :is="Component" :key="key"></component>
            </keep-alive>
          </transition>
        </router-view>
      </div>
    </div>
  </div>
</template>
<script>
import NavTab from '../components/NavTab.vue'
import NavHead from '../components/NavHead.vue'
import NavLink from '../components/NavLink.vue'
export default {
  name: 'Home',
  components: {
    NavTab,
    NavHead,
    NavLink,
  },
  data() {
    return {
      tabPathLsit: [],
    }
  },
  computed: {
    visitedTags() {
      return this.$store.state.visitedTags.map((item, index) => {
        return item.name
      })
    },
    key() {
      return this.$route.path
    }
  },
  mounted() {
    this.tabPathLsit = this.$router.options.routes[0].children
    window.document.documentElement.setAttribute('data-theme', 'light')
  },
  methods: {},
}
</script>
<style lang="scss" scoped>
@import '@/assets/css/common.scss';

// #mainCont {
//   //在此使用了背景颜色变量
//   @include background_color("background_color");
//   //再次使用了文字颜色变量
//   @include font_color("text-color");
// }

/* fade-transform */
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all .5s;
}

.fade-transform-enter {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
.home {
  display: flex;
  background: #fff;
  height: 100%;
  min-width: 1440px;
  overflow-y: hidden;
}
.homeLeft {
  display: flex;
  flex-direction: column;
  // max-width: 250px;
  background: #fff;
  height: 100%;
}
.homeRight {
  display: flex;
  flex: 1;
  width: 0;
  flex-direction: column;
  .header {
    width: 100%;
    background: #fff;
    height: 60px;
    border-bottom: 1px solid $bdColorD6D6D6;
    // box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  }
  .mainNav {
    display: flex;
    align-items: center;
    width: 100%;
    height: 44px;
    overflow-x: auto;
    overflow-y: hidden;
    // box-shadow: 1px 10px 10px 10px #000;
  }
  .mainCont {
    background-color: $bgColorF3F4F8;
    flex: 1;
    height: 0;
    overflow-y: scroll;
    overflow-x: hidden;
  }
}
</style>
